<template>
  <div class="left-panel">
    <div class="form-container" v-for="item in config" :key="item.title">
      <div class="box">
        <div class="title">{{ item.title }}</div>
        <draggable
          class="list"
          :list="item.config"
          :group="{ name: 'form', pull: 'clone', put: false }"
          :clone="defaultClone"
          itemKey="type"
        >
          <template #item="{ element }">
            <div class="item" @click="add(element)">
              <span>{{ element.name }}</span>
              <el-icon>
                <component :is="element.icon" />
              </el-icon>
            </div>
          </template>
        </draggable>
      </div>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { defineEmits } from "vue";
import draggable from "vuedraggable";
import config from "./config/element";

/* ts类型定义区域 */

/* 定义数据区域 */
const defaultClone = (item) => {
  return JSON.parse(JSON.stringify(item));
};

const emits = defineEmits(["clickAdd"]);

/* 事件处理区域 */
// 点击自动添加到列表
const add = (element) => {
  emits("clickAdd", JSON.parse(JSON.stringify(element)));
};

/* 监听 */

/* 生命周期 */
</script>
  
  <style lang="less" scoped>
.left-panel {
  width: 300px;
  // height: 100%;
  height: calc(100% - 70px);
  background-color: #fff;
  overflow-x: hidden;
    overflow-y: auto;
  //padding: 24px;
  padding: 14px;
  .form-container {
    .box {
      margin-bottom: 16px;
    }
    .title {
      font-size: 16px;
      line-height: 32px;
      font-size: 14px;
      color: #222;
      margin: 6px 6px;
      font-weight: 700;
    }
    .list {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 20px;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc((100% - 16px) / 2);
        font-size: 12px;
        padding: 6px 8px;
        cursor: grab;
        border: 1px solid #e4e5e7;
        //border-radius: 5px;

        &:hover {
          border-color: #3370ff;
        }
        .icon {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>
  